<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper">
			<nii-navbar :globalData="globalData" :scroll="scroll">
			</nii-navbar>
			<view id="infos">
				<view class="infos min-padding">
					<view class="d-flex justify-content-between  align-items-center">
						<view class="infos_box d-flex justify-content-between align-items-center theme_text">
							<view class="info d-flex align-items-center">
								<view class="avatar_box bg-white">
									<u--image :src="renders.infos.avatar" width="160rpx" height="160rpx" radius="160rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="avatar">
									  <template v-slot:loading>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									  <template v-slot:error>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									</u--image>
								</view>
								<view class="account">
									<view class="nickname fw-bolder">{{renders.infos.nickname}}</view>
									<view class="rows" v-if="renders.infos.rows">
										<view class="row" v-for="(row, index) in renders.infos.rows" :key="index">{{row}}</view>
									</view>
								</view>
							</view>
							<view class="qr_box text-center" v-if="renders.infos.qr.enable" @click="navigateAction(renders.infos.qr.alias, renders.infos.qr.params)">
								<view class="domxee_icon">&#xe60a;</view>
								<view class="text">{{renders.infos.qr.text}}</view>
							</view>
						</view>
						<!-- <view class="idents d-flex align-items-center flex-wrap">
							<view class="level ident d-flex align-items-center">
								<view class="domxee_icon fw-bold iconfont icon-vip"></view>
								<view class="name">{{renders.infos.mode_one_level_name}}</view>
							</view>
							<view class="level ident d-flex align-items-center">
								<view class="domxee_icon fw-bold iconfont icon-vip"></view>
								<view class="name">{{renders.infos.mode_three_level_name}}</view>
							</view>
							<view class="ident" v-for="(ident, index) in renders.infos.idents" :key="index">{{ident}}</view>
						</view> -->
						<view @click="navigateAction('settings')" class="domxee_icon iconfont icon-shezhi text-white font-40"></view>
					</view>
					
					
				</view>
			</view>
			<view id="vip" v-if="renders.vip.enable">
				<view class="vip min-padding">
					<view class="vip_box d-flex justify-content-between align-items-center" @click="navigateAction(renders.vip.alias, renders.vip.params)">
						<view class="left d-flex align-items-center">
							<view class="domxee_icon iconfont icon-vip"></view>
							<view class="text fw-bolder">{{renders.vip.text}}</view>
						</view>
						<view class="button fw-bolder">{{renders.vip.button}}</view>
					</view>
				</view>
			</view>
			<view id="vip" v-if="renders.merchant.enable">
				<view class="vip min-padding">
					<view class="vip_box d-flex justify-content-between align-items-center" @click="navigateAction(renders.merchant.alias, renders.merchant.params)">
						<view class="left d-flex align-items-center">
							<view class="domxee_icon iconfont icon-vip"></view>
							<view class="text fw-bolder">{{renders.merchant.text}}</view>
						</view>
						<view class="button fw-bolder">{{renders.merchant.button}}</view>
					</view>
				</view>
			</view>
			
			<!-- <view class="mx-20 mt-20 py-10 bg-white d-flex flex-wrap a-center j-sa b-r16">
				<view class="py-10 d-flex flex-column a-center span-6 box-border">
					<view class="co_666 font-24">
						我的余额
					</view>
					<view class="font-weight">
						0.00
					</view>
				</view>
				<view class="py-10 d-flex flex-column a-center span-6 box-border">
					<view class="co_666 font-24">
						销售收入
					</view>
					<view class="font-weight">
						0.00
					</view>
				</view>
				<view class="py-10 d-flex flex-column a-center span-6 box-border">
					<view class="co_666 font-24">
						优惠积分
					</view>
					<view class="font-weight">
						0.00
					</view>
				</view>
				<view class="py-10 d-flex flex-column a-center span-6 box-border">
					<view class="co_666 font-24">
						总任务量
					</view>
					<view class="font-weight">
						0
					</view>
				</view>
				<view class="py-10 d-flex flex-column a-center span-6 box-border">
					<view class="co_666 font-24">
						剩余任务量
					</view>
					<view class="font-weight">
						0
					</view>
				</view>
				
			</view> -->
			
			<view id="statistics" v-if="renders.statistics.enable">
				<view class="statistics min-padding">
					<view class="statistics_box section">
						<view class="contents d-flex align-items-center flex-wrap">
							<view class="item text-center" v-for="(item, index) in renders.statistics.lists" :key="index" @click="navigateAction(item.alias, item.params)">
								<view class="name vice_text">{{item.name}}</view>
								<view class="text fw-bolder">{{item.text}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view id="content_wrapper">
			<!-- <view id="fans" v-if="renders.activity1.enable">
				<view class="activity min-padding">
					<view class="activity_box" @click="navigateAction(renders.activity1.alias, renders.activity1.params)">
						<u--image :src="renders.activity1.img" width="710rpx" height="240rpx" radius="20rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="image">
						  <template v-slot:loading>
							 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
						  </template>
						  <template v-slot:error>
							 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
						  </template>
						</u--image>
					</view>
				</view>
			</view> -->
			
			<view id="orders" v-if="renders.sections.orders.enable">
				<view class="orders min-padding">
					<view class="orders_box section">
						<view class="titles d-flex justify-content-between align-items-center">
							<view class="title fw-bolder">{{renders.sections.orders.title}}</view>
							<view class="d-flex a-center">
								<view class="more fw-bold color" @click="navigateAction(renders.sections.orders.alias, renders.sections.orders.params)">{{renders.sections.orders.more}}</view>
								<view class="iconfont icon-more font-24"></view>
							</view>
							
						</view>
						<view class="lists d-flex justify-content-between align-items-center">
							<view class="list" v-for="(item, index) in renders.sections.orders.lists" :key="index" @click="navigateAction(item.alias, item.params)">
								<view class="item text-center">
									<view class="cover_box">
										<u--image :src="item.img" width="60rpx" height="60rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="cover">
										  <template v-slot:loading>
											 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
										  </template>
										  <template v-slot:error>
											 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
										  </template>
										</u--image>
									</view>
									<view class="name fw-bolder">{{item.name}}</view>
								</view>
								<view class="count bg text-center" v-if="item.count > 0">{{item.count}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- <view id="fans" v-if="renders.activity2.enable">
				<view class="activity min-padding">
					<view class="activity_box" @click="navigateAction(renders.activity2.alias, renders.activity2.params)">
						<u--image :src="renders.activity2.img" width="710rpx" height="240rpx" radius="20rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="image">
						  <template v-slot:loading>
							 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
						  </template>
						  <template v-slot:error>
							 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
						  </template>
						</u--image>
					</view>
				</view>
			</view> -->
			
			<!-- <view id="fans" v-if="renders.sections.fans.enable">
				<view class="fans min-padding">
					<view class="fans_box section">
						<view class="title fw-bolder">{{renders.sections.fans.title}}</view>
						<view class="lists d-flex align-items-center">
							<view v-if="item.enable" class="list d-flex flex-column j-center a-center" v-for="(item, index) in renders.sections.fans.lists" :key="index" @click="navigateAction(item.alias, item.params)">
								<view class="cover_box">
									<u--image :src="item.img" width="60rpx" height="60rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="cover">
									  <template v-slot:loading>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									  <template v-slot:error>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									</u--image>
								</view>
								<view :class="item.class_name" class="font-64 rounded-circle d-flex a-center j-center" style="width: 100rpx; height: 100rpx;"></view>
								<view class="name fw-bolder">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			
			<!-- <view id="fans" v-if="renders.activity3.enable">
				<view class="activity min-padding">
					<view class="activity_box" @click="navigateAction(renders.activity3.alias, renders.activity3.params)">
						<u--image :src="renders.activity3.img" width="710rpx" height="240rpx" radius="20rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="image">
						  <template v-slot:loading>
							 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
						  </template>
						  <template v-slot:error>
							 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
						  </template>
						</u--image>
					</view>
				</view>
			</view> -->
			
			<view id="tools" v-if="renders.sections.tools.enable">
				<view class="tools min-padding">
					<view class="tools_box section">
						<view class="title fw-bolder">{{renders.sections.tools.title}}</view>
						<view class="lists d-flex align-items-center flex-wrap j-start">
							<view class="list d-flex flex-column j-center a-center" v-for="(item, index) in renders.sections.tools.lists" :key="index" @click="item.name == '联系客服' ? shows.services = true : navigateAction(item.alias, item.params)">
								<view class="overflow-hidden">
									<u--image :src="item.img" width="60rpx" height="60rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="overflow-hidden">
									  <template v-slot:loading>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									  <template v-slot:error>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									</u--image>
								</view>
								<!-- <view :class="item.view_class_name" class="rounded-circle d-flex a-center j-center" style="width: 90rpx; height: 90rpx;">
									<view :class="item.class_name" class="font-64"></view>
								</view> -->
								<!-- <view class="rounded-circle d-flex a-center j-center" style="width: 100rpx; height: 100rpx; background-color: #ccc;">
									<text :class="item.class_name" class="font-64" style=""></text>
								</view> -->
								<view class="name fw-bolder">{{item.name}}</view>
							</view>
							
							<!-- <view @click="scanAction" class="list d-flex flex-column j-center a-center">
								<view class="cover_box">
									<u--image src="@/static/media/images/loading.png" width="60rpx" height="60rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="cover">
									  <template v-slot:loading>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									  <template v-slot:error>
										 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
									  </template>
									</u--image>
								</view>
								<view class="name fw-bolder">扫一扫</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- <view id="lists" v-if="renders.sections.lists.enable">
				<view class="lists min-padding">
					<view class="lists_box">
						<view class="titles d-flex align-items-center">
							<view class="line bg"></view>
							<view class="title text-nowrap fw-bolder">{{renders.sections.lists.title}}</view>
						</view>
						<view id="domxee_good_lists_v101">
							<view class="good_lists_box d-flex justify-content-between align-items-center flex-wrap">
								<view class="good" v-for="(good, index) in renders.sections.lists.lists" :key="index" @click="navigateAction(good.alias, good.params)">
									<view class="good_box section">
										<view class="good_cover">
											<u--image :src="good.cover" width="346rpx" height="346rpx" radius="20rpx 20rpx 0rpx 0rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="cover">
											  <template v-slot:loading>
												 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
											  </template>
											  <template v-slot:error>
												 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
											  </template>
											</u--image>
										</view>
										<view class="good_infos">
											<view class="good_title fw-bolder u-line-2">
												<span :class="['tag fw-bold', good.is_subsidy ? 'ZKLOGO subsidy' : 'bg']" v-if="good.tag">{{good.tag}}</span>{{good.title}}
											</view>
											<view class="superiorities">
												<scroll-view scroll-x="true" class="superiorities_box">
													<view class="contents d-flex align-items-center">
														<view class="item color border-color fw-bold" v-for="(superiority, s_index) in good.superiorities" :key="s_index">{{superiority}}</view>
													</view>
												</scroll-view>
											</view>
											<view class="prices">
												<view class="price fw-bolder color"><span>¥</span>{{good.price}}</view>
												<view class="bottom d-flex justify-content-between align-items-center">
													<s class="market_price fw-bold less_text">¥ {{good.market_price}}</s>
													<view class="viewer d-flex align-items-center">
														<view class="domxee_icon less_text">&#xe639;</view>
														<view class="number less_text">{{good.view_count}}</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- <u-popup :show="shows.services" @close="shows.services = false" mode="center" :closeOnClickOverlay="true" bgColor="transparent" :customStyle="{width: '100%'}">
			<view class="domxee_popup d-padding">
				<view class="section" id="services_popup">
					<view class="popup_close" @click="shows.services = false"><view class="domxee_icon">&#xe619;</view></view>
					<view class="title fw-bolder main_text text-center">{{renders.popups.services.title}}</view>
					<view class="descriptions">
						<view class="desc text-center" v-for="(service, index) in renders.popups.services.lists" :key="index">{{service}}</view>
					</view>
				</view>
				<view class="contact d-padding" id="services_popup_contact">
					<view class="contact_button button_bg text-center fw-bold" @click="callPhone(renders.popups.services.tel)">拨打电话</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-if="renders.popups.autoShow.enable" :show="shows.autoShow" @close="shows.autoShow = false" mode="center" :closeOnClickOverlay="!renders.popups.autoShow.force" bgColor="transparent" :customStyle="{width: '100%'}">
			<view class="domxee_popup d-padding">
				<view id="autoShow_popup">
					<view class="img_box" @click="navigateAction(renders.popups.autoShow.alias, renders.popups.autoShow.params)" :style="('width:'+renders.popups.autoShow.width+'rpx')+';'+('height:'+renders.popups.autoShow.height+'rpx')">
						<u--image :src="renders.popups.autoShow.img" :width="renders.popups.autoShow.width+'rpx'" :height="renders.popups.autoShow.height+'rpx'" mode="aspectFit" :bgColor="globalData.colors.current.section" class="img">
						  <template v-slot:loading>
							 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
						  </template>
						  <template v-slot:error>
							 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
						  </template>
						</u--image>
					</view>
				</view>
			</view>
		</u-popup> -->
		
		<!-- #ifdef APP-PLUS -->
		<!--    检查更新-->
		<yomol-upgrade :type="upgradeType" :url="upgradeUrl" title="发现新版本" :content="upgradeContent"
			ref="yomolUpgrade"></yomol-upgrade>
		<!-- #endif -->
	</view>
</template>

<script>
	import YomolUpgrade from '@/components/yomol-upgrade/yomol-upgrade.vue';
	export default {
		components: {
			// #ifdef APP-PLUS
			YomolUpgrade
			// #endif
		},
		data() {
			return {
				upgradeType: 'pkg', //pkg 整包 wgt 升级包
				upgradeContent: '', //更新内容
				upgradeUrl: '', //更新地址
				
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {
					
				},
				shows: {
					services: false,
					autoShow: false
				},
				renders: {
					activity1: {enable: false, name: '', img: '', alias: 'none', params: {}},
					activity2: {enable: false, name: '', img: '', alias: 'none', params: {}},
					activity3: {enable: false, name: '', img: '', alias: 'none', params: {}},
					infos: {avatar: '', nickname: '', rows: [], mode_one_level_name: '', mode_three_level_name: '', idents: [], qr: {enable: false, text: '', alias: 'none', params: {}}},
					vip: {enable: false, text: '', button: '', alias: 'none', params: {}},
					merchant: {enable: false, text: '', button: '', alias: 'none', params: {}},
					ad: false, 
					statistics: {enable: false, lists: [{name: '', text: '', alias: 'none', params: {}}]},
					sections: {
						orders: {enable: false, title: '', more: '', alias: 'none', params: {}, lists: [{name: '', img: '', alias: 'none', params: {}, count: 0}]},
						fans: {enable: false, title: '', lists: [{enable: false, name: '', img: '', alias: 'none', params: {}}]},
						tools: {enable: false, title: '', lists: [{name: '', img: '', alias: 'none', params: {}}]},
						lists: {enable: false, title: '', lists: []},
					},
					popups: {
						autoShow: {enable: false, img: '', width: 0, height: 0, alias: 'none', params: {}, force: false},
						services: {title: '', lists: [], tel: ''},
					},
				},
				data: {
					sections: {

					},
				},
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//初始数据
			that.initInformation();
			
			// #ifdef APP-PLUS
			console.log('this.checkVersionClick()');
			this.checkVersionClick();
			// setTimeout(this.checkVersionClick, 1000)
			// #endif
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			that.options = options;
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') 
			{
				console.log(alias);
				this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType); 
			},
			//拨打电话
			callPhone: function(mobile) {uni.makePhoneCall({phoneNumber: mobile});},
			//复制数据
			clipboardData: function (text) {const that = this;that.nii_common.clipboardData(text);},
			initInformation: function() {
				//设置对象
				let that = this;
				//loading
				that.nii_common.toastLoading('加载中');			
				//发起请求
				that.nii_common.request.build('user/information', that.options, 'POST', function (res) {
					//设置准备已就绪
					that.ready = true;
					//设置数据
					that.renders = res.data;
					//判断是否开启自动弹窗
					// if (that.renders.popups.autoShow.enable) {
					// 	//打开弹窗
					// 	that.shows.autoShow = true;
					// }
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				}, true);	
			},
			scanAction: function() {
				let that = this;
				console.log(1);
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ['qrCode'],
					onlyFromCamera: false,
					success: function (res) {
						console.log(res);
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						let url = res.result + '&type=gold';
						console.log(url);
						that.navigateAction(url, {}, '', true);
						// uni.navigateTo({
						// 	url: url
						// });
						// if(!uni.$u.test.isEmpty(res.result)){
						// 	uni.navigateTo({
						// 		url: res.result + '&type=gold'
						// 	});
						// }
					}
				});
			},
			
			/*
			 * 检测版本升级
			 */
			checkVersionClick() {
				let that = this
				console.log('检查更新')
				
				// that.nii_common.request.build('configs/check_update', {
				// 	platform: 'android',
				// 	// version: widgetInfo.version,
				// 	version: '0.0.2',
				// 	name: 'aa' //没啥用
				// }, 'GET', function(res) {
				// 	console.log(res.data);
				// 	if (res.data.update) {
				// 		//我的后台会返回一个安装包地址（pkgUrl），升级包地址（wgtUrl）
				// 		//判空来判断是非是整包升级还是资源包升级
				// 		//content是版本更新内容 \n换行
				// 		//ios用户pkgUrl是苹果市场App地址，android自定义下载地址
				// 		if (res.data.pkgUrl) {
				// 			that.upgradeType = 'pkg'
				// 			that.upgradeContent = res.data.content
				// 			that.upgradeUrl = res.data.pkgUrl
				// 			that.$refs.yomolUpgrade.show()
				// 		} else if (res.data.wgtUrl) {
				// 			that.upgradeType = 'wgt'
				// 			that.upgradeContent = res.data.content
				// 			that.upgradeUrl = res.data.wgtUrl
				// 			that.$refs.yomolUpgrade.show()
				// 		}
				// 	} else {
				// 		console.log('已是最新版本')
				// 		// this.$tools.toast('已经是最新版本了')
				// 	}
				// }, function(res) {
				// 	//提示失败
				// 	// that.nii_common.toastAlert(res.msg);
				// }, '');
				
				// 获取版本信息
				plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
					try {
						console.log('本地版本信息', widgetInfo)
						var platform = uni.getSystemInfoSync().platform
						console.log(platform)
						
						that.nii_common.request.build('configs/check_update', {
							platform,
							version: widgetInfo.version,
							// version: '0.0.2',
							name: widgetInfo.name //没啥用
						}, 'GET', function(res) {
							console.log(res.data);
							if (res.data.update) {
								//我的后台会返回一个安装包地址（pkgUrl），升级包地址（wgtUrl）
								//判空来判断是非是整包升级还是资源包升级
								//content是版本更新内容 \n换行
								//ios用户pkgUrl是苹果市场App地址，android自定义下载地址
								if (res.data.pkgUrl) {
									that.upgradeType = 'pkg'
									that.upgradeContent = res.data.content
									that.upgradeUrl = res.data.pkgUrl
									that.$refs.yomolUpgrade.show()
								} else if (res.data.wgtUrl) {
									that.upgradeType = 'wgt'
									that.upgradeContent = res.data.content
									that.upgradeUrl = res.data.wgtUrl
									that.$refs.yomolUpgrade.show()
								}
							} else {
								console.log('已是最新版本')
								// this.$tools.toast('已经是最新版本了')
							}
						}, function(res) {
							//提示失败
							// that.nii_common.toastAlert(res.msg);
						}, '');
					} catch (e) {
						console.error(e)
					}
				}, e => console.error(e))
			},
			
			// requestDemo: function() {
			// 	//获取对象
			// 	const that = this;
			// 	//loading
			// 	that.nii_common.toastLoading('处理中...');
			// 	//发起请求
			// 	that.nii_common.request.build('', {}, 'POST', function (res) {
			// 		//提示成功
			// 		that.nii_common.toastAlert('处理成功', 'success');
			// 	}, function (res) {
			// 		//提示错误
			// 		that.nii_common.toastAlert(res.msg);
			// 	}, function(res) {
			// 		//隐藏loading
			// 		that.nii_common.toastLoadingHide();
			// 	});	
			// }
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			
			//TODO：页面下拉刷新时的事件
			
			
			//停止刷新
			uni.stopPullDownRefresh();	
		},
		onReachBottom() {
			//设置对象
			let that = this;
			
			//TODO：页面滑动触底时的事件
			
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	page{
		background-color: black;
	}
	#header_wrapper {
		position: relative;
		z-index: 10;
		overflow: hidden;
		#infos {
			margin-top: 30rpx;
			.infos {
				.infos_box {
					.info {
						.avatar_box {
							width: 160rpx;
							height: 160rpx;
							border-radius: 160rpx;
							margin-right: 20rpx;
						}
						.account {
							.nickname {
								font-size: 36rpx;
								line-height: 50rpx;
							}
							.rows {
								margin-top: 10rpx;
								.row {
									font-size: 24rpx;
									line-height: 34rpx;
									margin-top: 4rpx;
								}
								.row:first-child {
									margin-top: 0;
								}
							}
						}
					}
					.qr_box {
						width: 80rpx;
						.domxee_icon {
							font-size: 60rpx;
							line-height: 60rpx;
							margin: 0 auto;
						}
						.text {
							margin-top: 10rpx;
							font-size: 24rpx;
							line-height: 34rpx;
						}
					}
				}
				.idents {
					margin-left: 180rpx;
					margin-top: 10rpx;
					.ident {
						padding: 0 20rpx;
						height: 44rpx;
						background: rgba(0,0,0,0.3);
						border-radius: 20rpx;
						line-height: 44rpx;
						font-size: 24rpx;
						color: #F5DEB5;
						margin-right: 20rpx;
						margin-top: 20rpx;
					}
					.level {
						.domxee_icon {
							margin-right: 8rpx;
							font-size: 30rpx;
						}
					}
				}
			}
		}
		#vip {
			margin-top: 30rpx;
			.vip {
				.vip_box {
					background: linear-gradient(132deg, #FFEACB 0%, #E7D2A7 100%);
					box-shadow: 2rpx 2rpx 0rpx 0rpx #ECD6B1;
					border-radius: 20rpx;
					padding: 20rpx;
					.left {
						.domxee_icon {
							font-size: 40rpx;
							margin-right: 20rpx;
							line-height: 34rpx;
							color: #593C24;
						}
						.text {
							font-size: 24rpx;
							color: #593C24;
							line-height: 34rpx;
						}
					}
					.button {
						width: max-content;
						height: 40rpx;
						background: #CBAF80;
						border-radius: 20rpx;
						padding: 0 20rpx;
						font-size: 24rpx;
						color: #593C24;
						line-height: 40rpx;
					}
				}
			}
		}
		#statistics {
			margin-top: 30rpx;
			.statistics {
				.statistics_box {
					padding: 0 20rpx 40rpx 20rpx;
					border-radius: 20rpx;
					.contents {
						.item {
							margin-right: 10rpx;
							margin-top: 40rpx;
							width: 160rpx;
							.name {
								font-size: 24rpx;
								line-height: 34rpx;
							}
							.text {
								margin-top: 44rpx;
								font-size: 30rpx;
								line-height: 40rpx;
							}
						}
						.item:nth-of-type(4n) {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
	#header_wrapper::after {
		content: '';
		width: 140%;
		height: 100%;
		position: absolute;
		left: -20%;
		top: 0;
		z-index: -1;
		border-radius: 0 0 50% 50%;
		background: linear-gradient(135deg, #389944 0%, #389944 100%);
	}
	#content_wrapper {
		padding-bottom: 300rpx;
		#orders {
			margin-top: 30rpx;
			.orders {
				.orders_box {
					padding: 30rpx 20rpx;
					border-radius: 20rpx;
					.titles {
						.title {
							font-size: 32rpx;
							line-height: 44rpx;
						}
						.more {
							font-size: 24rpx;
							line-height: 34rpx;
						}
					}
					.lists {
						margin-top: 50rpx;
						.list {
							position: relative;
							.item {
								width: 120rpx;
								.cover_box {
									margin: 0 auto;
									width: 60rpx;
									height: 60rpx;
								}
								.name {
									margin-top: 10rpx;
									font-size: 24rpx;
									line-height: 34rpx;
								}
							}
							.count {
								position: absolute;
								top: -20rpx;
								right: 0;
								width: 30rpx;
								height: 30rpx;
								border-radius: 30rpx;
								font-size: 24rpx;
								line-height: 30rpx;
							}
						}
						
					}
				}
			}
		}
		#fans {
			margin-top: 30rpx;
			.fans {
				.fans_box {
					padding: 30rpx 20rpx;
					border-radius: 20rpx;
					.title {
						font-size: 32rpx;
						line-height: 44rpx;
					}
					.lists {
						margin-top: 50rpx;
						.list {
							width: 120rpx;
							.cover_box {
								margin: 0 auto;
								width: 60rpx;
								height: 60rpx;
							}
							.name {
								margin-top: 10rpx;
								font-size: 24rpx;
								line-height: 34rpx;
							}
						}
					}
				}
			}
		}
		#ad {
			margin-top: 30rpx;
		}
		#tools {
			margin-top: 30rpx;
			.tools {
				.tools_box {
					padding: 30rpx 20rpx;
					border-radius: 20rpx;
					.title {
						font-size: 32rpx;
						line-height: 44rpx;
					}
					.lists {
						// margin-top: 50rpx;
						.list {
							margin: 50rpx 16rpx 0 0;
							width: 120rpx;
							.cover_box {
								margin: 0 auto;
								width: 60rpx;
								height: 60rpx;
							}
							.name {
								margin-top: 10rpx;
								font-size: 24rpx;
								line-height: 34rpx;
							}
						}
					}
				}
			}
		}
		#lists {
			margin-top: 30rpx;
			.lists {
				.lists_box {
					.titles {
						.line {
							margin-right: 20rpx;
							width: 10rpx;
							height: 30rpx;
						}
						.title {
							font-size: 36rpx;
							line-height: 50rpx;
						}
					}
				}
			}
		}
			
	}
	#services_popup {
		padding-bottom: 100rpx;
		.title {
			font-size: 36rpx;
			line-height: 50rpx;
		}
		.descriptions {
			margin-top: 80rpx;
			.desc {
				margin-top: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;
			}
			.desc:first-child {
				margin-top: 0;
			}
		}
	}
	#services_popup_contact {
		width: 580rpx;
		margin: 40rpx auto 0 auto;
		.contact_button {
			padding: 28rpx;
			font-size: 32rpx;
			line-height: 44rpx;
		}
	}
	#autoShow_popup {
		.img_box {
			margin: 0 auto;
		}
	}
</style>
